<template>
    <div class="w-full p-1 border-2">
        <div class="w-full p-2 text-xl font-bold" @click="onHomeList">
            <span>正在热映</span><span>({{hotDataInfo['count']}})</span>
            <i class="text-xl font-bold">></i>
        </div>
        <div class="flex flex-wrap">
            <div class="flex-col w-1/4 p-0.5" v-for="item in hotDataInfo.movies" :key="item.id"  @click="goViedo(item.id)">
                <!-- 卡片海报 -->
                <img class="h-1/2" :src="item['poster']" alt="">
                <!-- 电影标题 -->
                <p>{{item['title']}}</p>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent, ref,onMounted, toRefs } from 'vue'
// 唯有useRouter拥有path方法
import { useRouter } from 'vue-router'

export default defineComponent({
    // 定义props拿父组传过来的参数
    props:{
        hotDataInfo:{
            default:() => []
        }
    },
    setup(props: { hotDataInfo: any }){
        const {hotDataInfo} = toRefs(props)

        // 定义一个router用来调整路径地址
        const router:any = useRouter()
        function onHomeList(){
            router.push({
                path:'/homeList',
                query:{
                    stata:1
                }
            })
        }
        // 点击前往详情页
        function goViedo(id:number):any{
            router.push({
                path:'/viedopage',
                query:{
                    id:id
                }
            })
        }
        return{
            hotDataInfo,
            onHomeList,
            goViedo
        }
    }
})

</script>